ARTS NUMÉRIQUES

LOGICIELS


ActionScript > Menu à boutons - accès à 2 scènes


par : gwenola

Menu à 2 boutons donnant accès à 2 scènes différentes

(d’après un exercice de Bertrand Gilles - Technocité)

1. Dans un nouveau document Flash, ouvrez l’Inspecteur des propriétés s’il n’est pas visible (menu Window > Properties). Via ce panneau, définissez :

-  La taille de la scène principale : cliquez sur le bouton du champ Size et dans les champs Largeur (Width) et Hauteur (Heigth), entrez 600 et 400 pixels.

-  La couleur de fond du document : cliquez sur le carré blanc du champ Background Color pour choisir librement une autre couleur.

2. Sur la scène principale, créez un carré sans contour à partir de l’outil Rectangle . Via l’Inspecteur des propriétés, redéfinissez sa taille à 96 x 96 px, et disposez-le aux coordonnées : X 109.0 et Y 280.0.

Convertissez cette forme en bouton : menu Modify > Convert to Symbol (ou raccourci clavier : F8) > Button. Nommez-le Bt_Carré.

3. Créez un nouveau calque : cliquez sur le bouton Insérer Calque en bas de la liste des calques. Nommez-le Rond. Puis tracez une ellipse sans contour . Via l’Inspecteur des propriétés, définissez la taille à 101.0 px de côté, et disposez la forme aux coordonnées : X 108.5 et Y 120.5. Convertissez le rond en bouton nommé Bt_Rond.

4. Sur un nouveau calque nommé Menu, activez l’outil Texte et tapez MENU. Via l’Inspecteur des propriétés :

-  Changez librement la police de caractère (champ A) ;

-  Définissez la taille à 75 ;

-  Changez librement la couleur en cliquant sur le petit carré de couleur ;

-  Assurez-vous que le mode de texte est bien défini à Static Text (à gauche dans l’Inspecteur des propriétés) ;

-  Positionnez le texte à X 400.0 et Y 115.0 px.

5. Ouvrez la palette des Séquences : menu Window > Design Panels > Scene.

Créez une nouvelle séquence en cliquant sur le bouton Ajouter Séquence en bas de la palette.

Sur la scène de la nouvelle séquence, créez une interpolation de Forme guidée :

-  A l’image 1, créez une ellipse rouge. Convertissez-la en Movie Clip (raccourci clavier : F8).

-  Double cliquez sur le Movie Clip pour rentrer dans son propre scénario et créez une image clé vide à l’image 20 (raccourci clavier : F7). A cette image, à l’emplacement de l’ellipse, tracez une étoile bleue :

tracez un rectangle puis, avec la flèche Noire, ajoutez des coins au rectangle : enfoncez Alt, cliquez au milieu d’un bord, et en maintenant Alt enfoncé, faites glisser. Ajustez ensuite les pointes de l’étoile avec la flèche Noire toujours.

-  Cliquez entre les 2 images dans la ligne du temps et, via l’Inspecteur des propriétés, appliquez une interpolation de Forme (Tween > Shape).

-  Retournez sur la scène principale en cliquant sur le bouton Scene 2 en haut à gauche de la liste des calques (figure ci-contre).

-  Créez un image clé (F6) à l’image 20.

-  Créez un guide pour animer le Movie Clip :

- Cliquez sur le bouton Ajouter Guide de Mouvement en bas de la liste des calques.

- Avec l’outil Crayon , défini en Contour Noir et en mode Lissage, tracez un zigzag traversant la scène.

- Sélectionnez l’image clé 20 du Movie Clip et positionnez le centre de celui-ci, sur la scène, à une extrémité du tracé.

- De même, centrez le Movie Clip de l’image 1 à l’autre extrémité du tracé.

- Cliquez entre les 2 images clés du calque du Movie Clip et via l’Inspecteur des propriétés, appliquez une interpolation de Mouvement (Tween > Motion).

6. Dans la palette Séquences, créez une 3eme séquence. Sur la nouvelle scène, créez une interpolation de mouvement guidée :

-  Créez une forme librement à l’aide des divers outils de conception graphique de la barre d’outil.

-  Convertissez la forme en Symbole Graphique (F8).

-  Créez une image clé (F6) à l’image 20. Déplacez le symbole de cette image sur la scène. Via l’Inspecteur des propriétés, changez sa luminosité : Color > Brightness. Puis avec l’outil Transformation , changez sa taille et son inclinaison.

-  Créez un guide de mouvement et tracez, au Crayon Noir, une spirale dans le calque correspondant.

-  Centrez les 2 symboles de la scène aux deux extrémités de la spirale.

-  Cliquez entre les 2 images clés du calque aux symboles et via l’Inspecteur des propriétés, appliquez une interpolation de Mouvement (Tween > Motion).

-  Au-dessus du guide, créez un nouveau calque. Nommez-le Bouton. Créez une image clé vide (F7) à l’image 20.

-  Dessinez une forme de maison à partir d’un rectangle sans contour que vous déformerez (comme décrit ci-dessus pour l’étoile) avec la flèche Noire à cette image 20.

-  Convertissez la forme en Bouton (F8).

-  Prévisualisez l’ensemble de l’animation : Ctrl/Pomme+Enter.

7. Reste à placer un certain nombre d’actions, temporelles et liées aux boutons, pour contrôler le déroulement de l’animation.

Dans la palette Séquences, cliquez sur Scene 1 :

- Dans cette séquence, au-dessus du calque Menu, créez un nouveau calque et nommez-le Actions. Puis ouvrez le panneau des Actions en cliquant sur le bouton fléché de l’Inspecteur des propriétés.

- Tapez le code suivant :

Ainsi, la tête de lecture du fichier reste bloquée à la 1re image de l’animation (c-à-d. au menu).

- Cliquez sur le bouton Rond et entrez le code suivant :

Ainsi, en cliquant sur ce bouton, on accède à la séquence 2. (Si vous travaillez dans une version Flash en français, le terme Scene par défaut est remplacé par Séquence. Donc au lieu de taper “Scene 2” dans le code tapez “Séquence 2”).

- Cliquez sur le bouton Carré et entrez le code suivant :

Ainsi, en cliquant sur ce bouton, on accède à la séquence 3.

8. Dans la palette Séquences, cliquez sur Scene 2 :

- Créez un nouveau calque au-dessus du guide de mouvement. Nommez-le Actions.

- Créez une image clé vide (F7) à l’image 20 dans ce nouveau calque, puis entrez le code suivant :

Ainsi, à la fin de l’animation de la séquence 2, on retourne automatiquement au menu.

9. Dans la palette Séquences, cliquez sur Scene 3 :

- Créez un nouveau calque nommé Actions au-dessus du calque Bouton. Créez une image clé vide à l’image 20 dans ce calque, puis entrez le code suivant :

Ainsi, l’animation s’arrête à la dernière image de la séquence 3.

- Sélectionnez le Bouton en forme de maison sur la scène, et entrez le code suivant :

Ainsi, en cliquant sur ce bouton, on retourne au menu.

- Prévisualisez le résultat : Ctrl/Pomme+Enter.




logo DOCUMENT 249 menu Flash 1546 logo DOCUMENT 255 Accès_scènes PDF 140088
rechercher par mot-clé

mots-clés liés à cet article

actionscript

animation

flash

interactivité

quelques sites liés aux mots-clés de cet article


actionscript
actionscript sur wikipédia
Description de l’ActionScript sur Wikipédia.
yo-ric
Plus de 150 tutoriaux et cours pour créer votre site : (...)
développeur
Toutoriaux et scripts sur Java, Javascript, PHP, (...)
l’explicateur
Exemples d’Actionscript.
cbt cafe
Computer Based Training featuring free Video tutorials (...)
trustfiles
The Trustfiles is an artistic multi-media project by (...)
codes-sources
C++, ASP, ASP.NET, PHP, Java, ColdFusion, Javascript, (...)
zoneflashmx
Portail Flash, Actions script, html, Javascript, (...)
i-do
Site de Thierry Guibert.
trucsweb
ASP, Javascript, HTML, DHTML, CSS, DOM, XHTML, WML, (...)


animation
le ciel est bleu
Conception multimedia et interactivité.
lesire
Artiste multimedia.
burton
Tim Burton, the Offical Website.
buddy lee
Guidance Counselor.
ktoon
2D Animation Tool Kit
animation world magazine
Magazine en ligne sur le domaine de l’animation.
collins
Susan Collins (b. 1964) works across a range of media (...)
graphoui
Atelier de production de films d’animation - (...)
imagina
The international Digital Entertainment and Interactive (...)
guenoun
Animation typographique.


flash
yamago
Jeu Flash.
flash festival
Festival Flash (Paris).
mediabox
Centre de formation Flash, Dreamweaver, Director.
trustfiles
The Trustfiles is an artistic multi-media project by (...)
l’horloge
D’après Charles Baudelaire.
oculart
Animation flash fantastique.
flashkod
Tutoriaux et fichiers Flash.
white house animation inc
Animations Flash.
buddy lee
Guidance Counselor.
industorious clock
Horloge flash.


interactivité
computer fine arts
Galerie d’artistes web.
1H05
1H05 : A Graphic Playground, A Graphic Tale’s (...)
art interactive
Art Interactive’s mission is to provide a public (...)
collins
Susan Collins (b. 1964) works across a range of media (...)
creative nerve
Creative Nerve was founded by Camille Utterback to (...)
okno
0kn0.org is a new interdisciplinary media center for (...)
kac
Eduardo Kac is internationally recognized for his (...)
snibbe
Scott Sona Snibbe, artiste multimedia.
stanza
Steve Tanza, artiste multimedia.
mxhz
mxHz est un collectif d’artistes issus des médias, (...)